<template>
  <div class="scan">
    <van-nav-bar
      title="扫码录入"
      left-arrow
      @click-left="goBack"
    />
    
    <div class="scan-container">
      <div class="scan-box">
        <div class="scan-line"></div>
      </div>
      
      <div class="scan-tip">
        <van-icon name="scan" size="40" />
        <p>将二维码/条形码放入框内，即可自动扫描</p>
      </div>
      
      <van-button
        round
        block
        type="primary"
        @click="manualInput"
        style="margin: 20px 20px 0;"
      >
        手动输入ISBN
      </van-button>
      
      <van-button
        round
        block
        type="default"
        @click="goToAddManually"
        style="margin: 10px 20px 0;"
      >
        手动添加图书
      </van-button>
    </div>
    
    <van-dialog
      v-model:show="showManualInput"
      title="手动输入ISBN"
      show-cancel-button
      @confirm="confirmISBN"
    >
      <van-field
        v-model="isbnInput"
        label="ISBN"
        placeholder="请输入图书ISBN号"
      />
    </van-dialog>
    
    <van-dialog
      v-model:show="showBookForm"
      title="添加图书"
      show-cancel-button
      @confirm="confirmAddBook"
    >
      <van-form ref="bookForm">
        <van-cell-group inset>
          <van-field
            v-model="newBook.title"
            name="title"
            label="书名"
            placeholder="书名"
            :rules="[{ required: true, message: '请填写书名' }]"
          />
          <van-field
            v-model="newBook.author"
            name="author"
            label="作者"
            placeholder="作者"
            :rules="[{ required: true, message: '请填写作者' }]"
          />
          <van-field
            v-model="newBook.isbn"
            name="isbn"
            label="ISBN"
            placeholder="ISBN"
          />
          <van-field
            v-model="newBook.publisher"
            name="publisher"
            label="出版社"
            placeholder="出版社"
          />
          <van-field
            v-model="newBook.publishDate"
            name="publishDate"
            label="出版日期"
            placeholder="出版日期"
          />
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

export default {
  name: 'Scan',
  setup() {
    const router = useRouter()
    const showManualInput = ref(false)
    const showBookForm = ref(false)
    const isbnInput = ref('')
    const newBook = ref({
      title: '',
      author: '',
      isbn: '',
      publisher: '',
      publishDate: ''
    })
    
    const goBack = () => {
      router.go(-1)
    }
    
    const manualInput = () => {
      showManualInput.value = true
    }
    
    const goToAddManually = () => {
      showBookForm.value = true
    }
    
    const confirmISBN = () => {
      if (isbnInput.value) {
        // 模拟通过ISBN获取图书信息
        Toast.loading('正在获取图书信息...')
        
        setTimeout(() => {
          // 模拟获取到图书信息
          newBook.value = {
            title: 'Vue.js设计与实现',
            author: '霍春阳',
            isbn: isbnInput.value,
            publisher: '人民邮电出版社',
            publishDate: '2022-07'
          }
          
          showBookForm.value = true
          Toast.success('获取图书信息成功')
        }, 1500)
      } else {
        Toast.fail('请输入ISBN号')
      }
    }
    
    const confirmAddBook = () => {
      if (newBook.value.title && newBook.value.author) {
        // 模拟添加图书
        Toast.loading('正在添加图书...')
        
        setTimeout(() => {
          Toast.success('图书添加成功')
          router.push('/books')
        }, 1000)
      } else {
        Toast.fail('请填写必填信息')
      }
    }
    
    return {
      showManualInput,
      showBookForm,
      isbnInput,
      newBook,
      goBack,
      manualInput,
      goToAddManually,
      confirmISBN,
      confirmAddBook
    }
  }
}
</script>

<style scoped>
.scan-container {
  padding: 20px;
}

.scan-box {
  width: 280px;
  height: 280px;
  margin: 20px auto;
  position: relative;
  border: 2px solid #00c853;
  border-radius: 10px;
  overflow: hidden;
}

.scan-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #00c853;
  animation: scan 2s infinite linear;
}

@keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.scan-tip {
  text-align: center;
  margin-top: 20px;
}

.scan-tip p {
  margin-top: 10px;
  color: #666;
}
</style>